import 'package:flutter/material.dart';

class ExpansionPanelListTest extends StatefulWidget {
  @override
  _ExpansionPanelListTestState createState() => _ExpansionPanelListTestState();
}

class _ExpansionPanelListTestState extends State<ExpansionPanelListTest>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;
  bool _isExpanded = true;
  bool _open = true;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(vsync: this);
  }

  @override
  void dispose() {
    super.dispose();
    _controller.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        title: Text('展开闭合的列表'),
      ),
      body: Row(
        children: [
          Expanded(child: boddy()),
          Expanded(child: Column(
            children: [
              Test(),
              // Test(),
            ],
          )),
        ],
      ),
    );
  }

  Widget boddy() {
    return Container(
      alignment: Alignment.center,
      child: Column(
        children: <Widget>[
          ExpansionPanelList(
            //开关动画时长
            // animationDuration: kThemeAnimationDuration,
            animationDuration: Duration(milliseconds: 500),

            //开关回调
            // expansionCallback: (panelIndex, isExpanded) {
            // setState(() {
            //   _datas[panelIndex].isExpanded = !isExpanded;
            // });
            // },
            expansionCallback: (panelIndex, isExpanded) {
              setState(() {
                _isExpanded = !isExpanded;
              });
            },

            children: <ExpansionPanel>[
              ExpansionPanel(
                isExpanded: _isExpanded,
                canTapOnHeader: true,
                headerBuilder: (context, isExpanded) {
                  return Container(
                    height: 100,
                    color: Colors.amber,
                    child: ListTile(
                      title: Text('我是标题'),
                      leading: Text('data'),
                    ),
                  );
                },
                body: Padding(
                  padding: EdgeInsets.fromLTRB(15, 0, 15, 15),
                  child: ListBody(
                    children: <Widget>[
                      Card(
                        margin: EdgeInsets.fromLTRB(0, 0, 0, 10),
                        child: Padding(
                          padding: EdgeInsets.all(8),
                          child: Text('我是内容'),
                        ),
                      ),
                      Card(
                        margin: EdgeInsets.fromLTRB(0, 0, 0, 10),
                        child: Padding(
                          padding: EdgeInsets.all(8),
                          child: Text('我是内容'),
                        ),
                      ),
                      Card(
                        margin: EdgeInsets.fromLTRB(0, 0, 0, 10),
                        child: Padding(
                          padding: EdgeInsets.all(8),
                          child: Text('我是内容'),
                        ),
                      ),
                      Card(
                        margin: EdgeInsets.fromLTRB(0, 0, 0, 10),
                        child: Padding(
                          padding: EdgeInsets.all(8),
                          child: Text('我是内容'),
                        ),
                      ),
                      Card(
                        margin: EdgeInsets.fromLTRB(0, 0, 0, 10),
                        child: Padding(
                          padding: EdgeInsets.all(8),
                          child: Text('我是内容'),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

class Test extends StatefulWidget {
  @override
  _TestState createState() => _TestState();
}

class _TestState extends State<Test> {
  bool _open = true;
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.red,
      child: Column(
        children: <Widget>[
          GestureDetector(
            onTap: () {
              setState(() {
                _open = !_open;
              });
            },
            child: Container(
              height: 45,
              color: Colors.green.withOpacity(.3),
              alignment: Alignment.centerRight,
              child: IconButton(
                icon: Icon(Icons.arrow_drop_down),
                onPressed: () {
                  setState(() {
                    _open = !_open;
                  });
                },
              ),
            ),
          ),
          MergeableMaterial(
            hasDividers: true,
            elevation: 0,
            children: [
              MaterialSlice(
                key: ValueKey(1),
                child: AnimatedCrossFade(
                  firstChild: Container(height: 0.0),
                  secondChild: Container(
                    decoration: BoxDecoration(
                      color: Colors.lightGreen,
                      borderRadius: BorderRadius.circular(6),
                    ),
                    child: ListView.separated(
                        shrinkWrap: true,
                        physics: NeverScrollableScrollPhysics(),
                        itemBuilder: (context, index) {
                          return Container(
                              color: Colors.lightGreen, child: Text('data'));
                        },
                        separatorBuilder: (BuildContext context, int index) {
                          return Divider();
                        },
                        itemCount: 5),
                  ),
                  firstCurve:
                      const Interval(0.0, 0.6, curve: Curves.fastOutSlowIn),
                  secondCurve:
                      const Interval(0.4, 1.0, curve: Curves.fastOutSlowIn),
                  sizeCurve: Curves.fastOutSlowIn,
                  crossFadeState: _open
                      ? CrossFadeState.showSecond
                      : CrossFadeState.showFirst,
                  duration: Duration(milliseconds: 800),
                ),
              ),
              // MaterialSlice(
              //   key: ValueKey(2),
              //   child: AnimatedCrossFade(
              //     firstChild: Container(height: 0.0),
              //     secondChild: Container(
              //       height: 200.0,
              //       // width: 50,
              //       color: Colors.pink,
              //     ),
              //     firstCurve:
              //         const Interval(0.0, 0.6, curve: Curves.fastOutSlowIn),
              //     secondCurve:
              //         const Interval(0.4, 1.0, curve: Curves.fastOutSlowIn),
              //     sizeCurve: Curves.fastOutSlowIn,
              //     crossFadeState: _open
              //         ? CrossFadeState.showSecond
              //         : CrossFadeState.showFirst,
              //     duration: Duration(milliseconds: 300),
              //   ),
              // ),
              // MaterialGap(key: ValueKey(3)),
            ],
          ),
         
          // Container(
          //   height: 20,
          //   color: Colors.red.withOpacity(.3),
          // ),
        ],
      ),
    );
  }
}
